<template>
  <div class="community-containerr">
  <!-- 顶部内容 -->
  <div class="header">
    <h1>社区广场</h1>
        <p>发现有趣的话题，与志同道合的用户交流</p>
  </div>

  <!-- 主内容区域 -->
  <router-view class="content-area" />

  <!-- 底部导航栏 -->
  <el-menu
    :default-active="$route.path"
    mode="horizontal"
    class="bottom-nav"
    @select="handleNavSelect"
  >
    <el-menu-item index="/">
      <i class="iconfont icon-shop"></i>
      <span>商城</span>
    </el-menu-item>
    <el-menu-item index="/edu">
      <i class="iconfont icon-edu"></i>
      <span>农教</span>
    </el-menu-item>
    <el-menu-item index="/community">
      <i class="iconfont icon-community"></i>
      <span>社区</span>
    </el-menu-item>
  </el-menu>

   <!-- 新增左侧菜单按钮 -->
   <el-button
    type="primary"
    icon="el-icon-menu"
    class="menu-trigger"
    @click="drawerVisible = true"
  ></el-button>
<!-- 左侧抽屉菜单 -->
<el-drawer
      v-model="drawerVisible"
      :with-header="false"
      :size="240"
      :before-close="handleClose"
    >
      <el-menu
        :default-active="$route.path"
        mode="vertical"
        @select="handleMenuSelect"
      >
        <el-menu-item index="/shop/products">
          <i class="iconfont icon-product"></i>
          <span>商品列表</span>
        </el-menu-item>
        <el-menu-item index="/shop/myaccount">
          <i class="iconfont icon-account"></i>
          <span>我的账户</span>
        </el-menu-item>
        <el-menu-item index="/shop/cart">
          <i class="iconfont icon-cart"></i>
          <span>购物车</span>
        </el-menu-item>
      </el-menu>
    </el-drawer>
 
  </div>
</template>

</div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()
const drawerVisible = ref(false)

const handleMenuSelect = (key: string) => {
router.push(key).catch(err => {
  if (!err.message.includes('Avoided redundant navigation')) throw err
})
drawerVisible.value = false // 关闭抽屉
}
const handleClose = () => {
drawerVisible.value = false
}
const handleNavSelect = (key: string) =>{
if (key === '/') {
  //保持在当前页面
  router.replace({ path: '/'})
} else {
  router.push(key)
}
}
</script>

<style scoped>
.community-container {
min-height: 100vh;
position: relative;
}

.menu-trigger {
position: absolute;
top: 20px;
right: 20px;
z-index: 1001;
}

.content-area {
padding: 20px;
margin: 60px 0 80px 0; /* 为导航和侧边栏留出空间 */
}

.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #eee;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 1000;
}

.el-drawer {
background: #f5f7fa;
}

@media (max-width: 768px) {
.menu-trigger {
  top: 10px;
  right: 10px;
}

.el-drawer {
  width: 100% !important;
}
}
</style>
